import * as echarts from 'echarts'
import 'echarts/map/js/china.js'
import {
  exportMethod
} from "../../../util/push";

function parseTime(timestamp) { // 参数为需要进行格式转换的时间戳
  var date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '-'
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
  // var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';   //时
  // var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';  //分
  // var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());  //秒
  // let strDate = Y+M+D+h+m+s;
  let strDate = Y + M + D
  // console.log(date.getMonth() )
  return strDate
}
// import geoJson from '../../components/china.json'
export default {
  data() {
    return {
      minDate: '',
      maxDate: '',
      range: '',
      pickerOptions: {
        onPick: ({
          maxDate,
          minDate
        }) => {
          this.minDate = minDate
          this.maxDate = maxDate
        },
        disabledDate: (time) => {
          if (this.minDate && !this.maxDate) {
            this.range // 要更改禁用的日期范围只要修改这里的代码就可以
            const minTime = this.minDate.getTime()
            const newTime = time.getTime()
            return newTime > (minTime + this.range) || newTime < (minTime - this.range)
          }
          return false
        }
      },
      shortcuts: [{
          text: "近7天",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: "近30天",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: "近90天",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: "近180天",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: "近360天",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
            picker.$emit('pick', [start, end]);
          }
        }
      ],


      //预约统计板块
      yynumber: '', //预约人事
      hxnumber: '', //核销数量
      hexnumber1: '', //核销率
      bookNum: '',
      usedNum: '',
      usedRatio: "",
      cumulativeUsers: '',
      cumulativeVisits: '',
      data: [],
      data1: [],
      data11: [],
      num: 1,
      num1: 0,
      time: '',
      time1: '',
      timesyy: "",
      timeage: "",
      timedq: "",
      timesex: "",
      dates: [],
      dates1: [],
      times1: [],
      times: [],
      datesage: [],
      timesage: [],
      datesdq: [],
      timesdq: [],
      datessex: [],
      timessex: [],
      dateyy: [],
      timeyy: [],
      timesex: [],
      timesex1: '',
      timesex0: '',
      data1: [12, 19, 65, 45, 44, 23],
      data2: [12, 19, 6, 45, 55, 3],
      data3: [2, 19, 5, 45, 4, 23],
      timeData: ["2022-7-11", "2022-7-12", "2022-7-13", "2022-7-14", "2022-7-15", "2022-7-16"],
      width: 335,
      screenWidth: document.body.clientWidth,
      width: 335,
      spinShow1: false,
      time1: [],
      visitType: "活跃用户",
      spinShow2: false,
      visitType2: "活跃用户",
      time2: [],
      spinShow3: false,
      visitType3: "活跃用户",
      time3: [],
      museumId: "1",
      museumList: [],
      tendencyChart: '1',
      valueday: '',
      dayData: ["全天"],
      options: [],
      valuem: "全天",
      brr: []
    }
  },
  created() {
    // 获取日期选择器的默认显示的时间
    let start = new Date()
    // console.log(start)
    var b = parseTime(start.getTime())
    // console.log(start.setTime(start.getTime() - 3600 * 1000 * 24 * 30));
    var a = parseTime(start.setTime(start.getTime() - 3600 * 1000 * 24 * 30))
    // console.log(a, b)
    let arr = [a, b]
    // console.log(arr)
    this.time = arr
    this.time1 = arr
    this.timeage = arr
    this.timedq = arr
    this.timesex = arr
    this.timesyy = arr
    this.valueday = b
  },
  watch: {
    // screenWidth(val) {
    //   let that = this;
    //   setTimeout(function () {
    //     var myChart1 = that.echarts.init(document.getElementById("chinaMap"));
    //     myChart1.resize();
    //   }, 300);
    // },
    // "$store.state.isCollapse"(val) {
    //   if (val) {
    //     this.width = 150;
    //   } else {
    //     this.width = 335;
    //   }
    //   let that = this;
    //   setTimeout(function () {
    //     var myChart1 = that.echarts.init(document.getElementById("chinaMap"));
    //     myChart1.resize();
    //   }, 300);
    // }
  },
  mounted() {
    this.gethostList()
    this.mainsex() //折现曲线图
    // this.getProvinceCities() 
    this.getDay() //中国地图
    // this.cityMap() //城市地图
    this.main2() //到馆人数占比图
    this.oiMeter() //油表图
    this.shitime() //油表图数据
    this.timeChangesex() //趋势分析时间改变方法
    this.tendency(1) //趋势图
    // this.getdatatime()

  },
  methods: {
    //导出当天数据
    exportTotalResult() {
      console.log(this.valueday, this.valuem);
      exportMethod({
        url: "chongqing/stage/reservation-traveler/getExportTotalResult",
        method: "get",
        data: {
          travelDate: this.valueday,
          sessionTime: this.valuem === "全天" ? '' : this.valuem
        },
      });
    },
    //导出用户趋势分析
    exportVisitorsTrendDayExcel() {
      console.log("888", this.num);
      // console.log(this.timesex[1],"zzzq");
      // console.log(this.timesex[0],"zzzq");

      exportMethod({
        url: "chongqing/stage/statistics/exportVisitorsTrendDayExcel",
        method: "post",
        data: {
          endDate: this.timesex[1],
          startDate: this.timesex[0],
          type: this.num
        },
      });
    },
    //趋势分析
    timeChangesex() {
      console.log(this.timesex, "999999999999999999999999999");
      // this.brr=this.timesex
      // console.log(this.brr);
      this.tendency(this.tendencyChart)
    },
    tendency(num) {
      this.tendencyChart = num
      // let start = new Date()
      // var b = parseTime(start.getTime())         
      // var a = parseTime(start.setTime(start.getTime() - 3600 * 1000 * 24 * 30))           
      // this.brr = [a, b]
      // console.log(this.brr);
      if (num == 1) {
        this.num = 1
        this.range = 31 * 24 * 3600 * 1000
        // this.timesex=this.brr
        this.$http(
          "/chongqing/stage/statistics/getVisitorsTrendDay", {
            // startDate: this.timesex.length == 0 ? '' : this.timesex[0],
            // endDate: this.timesex.length == 0 ? '' : this.timesex[1]
            "endDate": this.timesex[1],
            "startDate": this.timesex[0],
            "type": num
          },
          "post",
          (res) => {
            // console.log(res,"趋势图的数据888888888888888888888888888888888");
            this.data2 = []
            this.timeData = []
            this.data1 = []
            res.data.data.map(item => {
              this.data2.push(item.checkNum)
              this.timeData.push(item.travelDate.slice(5, 10))
              this.data1.push(item.orderNum)
            })
            if (this.timeData.length > 31) {
              this.$message({
                message: '按天趋势图请选择一个月内时间',
                type: 'warning'
              });
            } else {
              this.mainsex()
            }
            console.log(this.data2, "data2w核销数wwwwwwwwwwwwwwwwwww");
            console.log(this.timeData, "timeData日期wwwwwwwwwwwwwwwwwwww");
            console.log(this.data1, "data1预约数wwwwwwwwwwwwww");

          }
        )
      }
      if (num == 2) {
        this.num = 2

        this.range = 62 * 24 * 3600 * 1000
        this.$http(
          "/chongqing/stage/statistics/getVisitorsTrendDay", {
            // startDate: this.timesex.length == 0 ? '' : this.timesex[0],
            // endDate: this.timesex.length == 0 ? '' : this.timesex[1]
            "endDate": this.timesex[1],
            "startDate": this.timesex[0],
            "type": num
          },
          "post",
          (res) => {
            this.data2 = []
            this.timeData = []
            this.data1 = []
            res.data.data.map(item => {
              this.data2.push(item.checkNum)
              this.timeData.push(item.travelDate)
              this.data1.push(item.orderNum)
            })
            if (this.timeData.length > 9) {
              this.$message({
                message: '按周趋势图请选择两个月内时间',
                type: 'warning'
              });
            } else {
              this.mainsex()
            }
            // this.mainsex()
            console.log(this.data2, "data2w核销数wwwwwwwwwwwwwwwwwww");
            console.log(this.timeData, "timeData日期wwwwwwwwwwwwwwwwwwww");
            console.log(this.data1, "data1预约数wwwwwwwwwwwwww");
          }
        )
      }
      if (num == 3) {
        this.range = 365 * 24 * 3600 * 1000
        this.num = 3

        this.$http(
          "/chongqing/stage/statistics/getVisitorsTrendDay", {
            // startDate: this.timesex.length == 0 ? '' : this.timesex[0],
            // endDate: this.timesex.length == 0 ? '' : this.timesex[1]
            "endDate": this.timesex[1],
            "startDate": this.timesex[0],
            "type": num
          },
          "post",
          (res) => {
            this.data2 = []
            this.timeData = []
            this.data1 = []
            res.data.data.map(item => {
              this.data2.push(item.checkNum)
              this.timeData.push(item.travelDate)
              this.data1.push(item.orderNum)
            })
            if (this.timeData.length > 13) {
              this.$message({
                message: '按月趋势图请选择一年内时间',
                type: 'warning'
              });
            } else {
              this.mainsex()
            }
            console.log(this.data2, "data2w核销数wwwwwwwwwwwwwwwwwww");
            console.log(this.timeData, "timeData日期wwwwwwwwwwwwwwwwwwww");
            console.log(this.data1, "data1预约数wwwwwwwwwwwwww");

          }
        )
      }
      if (num == 4) {
        this.num = 4

        this.range = 3650 * 24 * 3600 * 1000
        this.$http(
          "/chongqing/stage/statistics/getVisitorsTrendDay", {
            // startDate: this.timesex.length == 0 ? '' : this.timesex[0],
            // endDate: this.timesex.length == 0 ? '' : this.timesex[1]
            "endDate": this.timesex[1],
            "startDate": this.timesex[0],
            "type": num
          },
          "post",
          (res) => {
            // console.log(res,"趋势图的数据888888888888888888888888888888888");
            this.data2 = []
            this.timeData = []
            this.data1 = []
            res.data.data.map(item => {
              this.data2.push(item.checkNum)
              this.timeData.push(item.travelDate)
              this.data1.push(item.orderNum)
            })
            // console.log(this.data2,"data2w核销数wwwwwwwwwwwwwwwwwww");
            // console.log(this.timeData,"timeData日期wwwwwwwwwwwwwwwwwwww");
            // console.log(this.data1,"data1预约数wwwwwwwwwwwwww");         
            this.mainsex()

          }
        )
      }
    },
    //折现曲线图
    mainsex() {
      let chartDom1 = document.getElementById('mainsex'),
        myChart1 = echarts.init(chartDom1),
        option1
      option1 = {
        toolbox: {
          show: true,
          feature: {
            // mark: {show: true},
            // dataView: {show: true, readOnly: false},
            // restore: {show: true},
            saveAsImage: {
              show: true,
              title: '保存'
            }
          }
        },
        tooltip: { //鼠标移入轴线
          trigger: 'axis',
        },
        "grid": {
          "top": "20%",
          "left": "2%",
          "right": "2%",
          "bottom": "5%",
          "containLabel": true
        },
        legend: {
          left: '1%',
          top: '5%',
          data: [{
            name: '预约量',
          }, {
            name: '核销量',
            // icon: 'line'//更改 legend 展示样子
          }, ],
        },
        xAxis: {
          type: 'category',
          data: this.timeData,
          axisLabel: { // 坐标轴标签
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 20, // 刻度标签与轴线之间的距离
            color: '#666', // 默认取轴线的颜色 
            fontSize: 12,
            interval: 0
          },
          axisLine: {
            "show": true,
          },
          axisTick: {
            "show": false, //隐藏X刻度线
          },
        },
        yAxis: {
          // type: 'value',
          // max: function (value) {
          //   return value.max + 100;
          // },
          splitNumber: 3,
          axisLine: { // Y坐标轴轴线
            show: false, // 是否显示
          },
          axisTick: { // 坐标轴的刻度
            show: false, // 是否显示
          },
          axisLabel: { // 坐标轴的标签
            show: true, // 是否显示
            color: '#000', // 默认轴线的颜色
          },
        },
        series: [{
            name: '预约量',
            type: 'line',
            data: this.data1,
            smooth: true, //是否为曲线
            showSymbol: true,
            symbolSize: 8, //拐点大小
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#e03248',
                  borderColor: '#e03248', //拐点边框颜色
                }
              }
            },
          },
          {
            name: '核销量',
            type: 'line',
            data: this.data2,
            smooth: true, //是否为曲线
            showSymbol: true,
            symbolSize: 8, //拐点大小
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#7fd3f7',
                  borderColor: '#7fd3f7', //拐点边框颜色
                }
              }
            },
          }
        ]
      };
      option1 && myChart1.setOption(option1)
    },
    //油表图
    oiMeter() {
      setTimeout(() => {
        let chartDom1 = document.getElementById('mainyy1'),
          myChart1 = echarts.init(chartDom1),
          option1
        option1 = {
          tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
          },
          toolbox: {
            show: true,
            feature: {
              // mark: {show: true},
              // dataView: {show: true, readOnly: false},
              // restore: {show: true},
              saveAsImage: {
                show: true,
                title: '保存'
              }
            }
          },
          series: [{
            name: '核销率',
            type: 'gauge',
            detail: {
              formatter: '{value}%'
            },
            data: [{
              value: Number(this.usedRatio * 100).toFixed(2),
              name: '核销率'
            }],
            axisLine: {
              show: true,
            }
          }]
        }
        option1 && myChart1.setOption(option1)
      }, 500)
      // console.log(this.bookNum);
      // console.log(this.bookNum, "00000000000000000000000000000000000000000000000000000");

    },
    //到馆人数占比图
    main2() {
      let chartDom = document.getElementById('main2'),
        myChart = echarts.init(chartDom),
        option
      option = {
        title: {
          text: '',
          subtext: '',
          left: 'center'
        },
        color: [
          "skyblue", "pink"
        ],
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          show: true,
          feature: {
            // mark: {show: true},
            // dataView: {show: true, readOnly: false},
            // restore: {show: true},
            saveAsImage: {
              show: true,
              title: '保存'
            }
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: '人数占比',
          type: 'pie',
          radius: '50%',
          data: [{
              value: this.bookNum,
              name: '预约人数'
            },
            {
              value: this.usedNum,
              name: '核销人数'
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      option && myChart.setOption(option)
    },
    getmuseumList() {
      this.spinShow1 = true;
      this.spinShow2 = true;
      this.spinShow3 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", res => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 50) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 50) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.getDay();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    // 得到默认时间
    getDay() {
      this.time3 = [];
      this.time3.push(this.getTime(this.getTime4(7)));
      this.time3.push(this.getTime(this.getTime4(1)));
      this.getProvinceCities();
    },
    randomData() {
      return Math.round(Math.random() * 50);
    },
    // 省份城市
    getProvinceCities() {
      this.spinShow3 = true;
      var start = "",
        end = "";
      if (this.time3[0] != "" && this.time3[1] != "") {
        start = this.time3[0];
        end = this.time3[1];
      }
      // console.log("开始时间",start)
      // console.log("结束时间",end)
      this.$http(
        "/chongqing/stage/reservation-traveler/getProvinceResult", {
          beginDate: start,
          endDate: end,
          museumId: this.museumId
        },
        "post",
        res => {
          // console.log("地图接口数据",res.data)
          // if (res.data.code == 200) {
          //   var data = {};
          //   for (let i = 0; i < res.data.data.length; i++) {
          //     if (res.data.data[i].visitType == this.visitType3) {
          //       data = res.data.data[i];
          //     }
          //   }
          // this.draw5(data.province);
          // } else {
          //   this.$Message.error(res.data.msg);
          // }
          // this.spinShow3 = false;
          var item = [{
              "code": 110000,
              "area": "北京",
              "number": this.randomData()
            },
            {
              "code": 120000,
              "area": "天津",
              "number": this.randomData()
            },
            {
              "code": 130000,
              "area": "河北",
              "number": this.randomData()
            },
            {
              "code": 140000,
              "area": "山西",
              "number": this.randomData()
            },
            {
              "code": 150000,
              "area": "内蒙古",
              "number": this.randomData()
            },
            {
              "code": 210000,
              "area": "辽宁",
              "number": this.randomData()
            },
            {
              "code": 220000,
              "area": "吉林",
              "number": this.randomData()
            },
            {
              "code": 230000,
              "area": "黑龙江",
              "number": this.randomData()
            },
            {
              "code": 310000,
              "area": "上海",
              "number": this.randomData()
            },
            {
              "code": 320000,
              "area": "江苏",
              "number": this.randomData()
            },
            {
              "code": 330000,
              "area": "浙江",
              "number": this.randomData()
            },
            {
              "code": 340000,
              "area": "安徽",
              "number": this.randomData()
            },
            {
              "code": 350000,
              "area": "福建",
              "number": this.randomData()
            },
            {
              "code": 360000,
              "area": "江西",
              "number": this.randomData()
            },
            {
              "code": 370000,
              "area": "山东",
              "number": this.randomData()
            },
            {
              "code": 410000,
              "area": "河南",
              "number": this.randomData()
            },
            {
              "code": 420000,
              "area": "湖北",
              "number": this.randomData()
            },
            {
              "code": 430000,
              "area": "湖南",
              "number": this.randomData()
            },
            {
              "code": 440000,
              "area": "广东",
              "number": this.randomData()
            },
            {
              "code": 450000,
              "area": "广西",
              "number": this.randomData()
            },
            {
              "code": 460000,
              "area": "海南",
              "number": this.randomData()
            },
            {
              "code": 500000,
              "area": "重庆",
              "number": this.randomData()
            },
            {
              "code": 510000,
              "area": "四川",
              "number": this.randomData()
            },
            {
              "code": 520000,
              "area": "贵州",
              "number": this.randomData()
            },
            {
              "code": 530000,
              "area": "云南",
              "number": this.randomData()
            },
            {
              "code": 540000,
              "area": "西藏",
              "number": this.randomData()
            },
            {
              "code": 610000,
              "area": "陕西",
              "number": this.randomData()
            },
            {
              "code": 620000,
              "area": "甘肃",
              "number": this.randomData()
            },
            {
              "code": 630000,
              "area": "青海",
              "number": this.randomData()
            },
            {
              "code": 640000,
              "area": "宁夏",
              "number": this.randomData()
            },
            {
              "code": 650000,
              "area": "新疆",
              "number": this.randomData()
            },
            {
              "code": 710000,
              "area": "台湾",
              "number": this.randomData()
            },
            {
              "code": 810000,
              "area": "香港",
              "number": this.randomData()
            },
            {
              "code": 820000,
              "area": "澳门",
              "number": this.randomData()
            }
          ]
          //你可以自定义字段，
          item.map((i) => {
            i.name = i.area;
            i.value = i.number;
            return i
          });
          this.draw5(item);
        }
      );
    },
    // 改变条件
    onChange3(data) {
      this.time2 = data;
      this.getPlatforms(); //刷新
    },
    // 改变条件
    onChange4(data) {
      this.getPlatforms();
    },
    //中国地图
    // draw5(data) {
    //   var newData = data;
    //   let dom = document.getElementById("chinaMap");
    //   let myChart = this.echarts.init(dom);
    //   myChart.setOption({
    //     tooltip: {
    //       trigger: "item"
    //     },
    //     visualMap: {
    //       show: true,
    //       x: "left",
    //       y: "20",
    //       color: [
    //         "#5475f5",
    //         "#9feaa5",
    //         "#85daef",
    //         "#74e2ca",
    //         "#e6ac53",
    //         "#9fb5ea"
    //       ]
    //     },
    //     series: [{
    //       name: "地区分布",
    //       type: "map",
    //       zoom: 1.1,
    //       mapType: "china",
    //       roam: false,
    //       label: {
    //         normal: {
    //           show: false
    //         },
    //         emphasis: {
    //           show: false
    //         }
    //       },
    //       data: data
    //     }]
    //   });
    // },
    refresh() {
      this.getTotalVisitors()
    },
    //城市分布
    // cityMap() {
    //   let chartDom = document.getElementById('cityMap'),
    //     myChart = echarts.init(chartDom),
    //     option
    //   option = {
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'cross',
    //         crossStyle: {
    //           color: '#999'
    //         }
    //       }
    //     },
    //     "grid": {
    //       "top": "10%",
    //       "left": "4%",
    //       "right": "15%",
    //       "bottom": "5%",
    //       "containLabel": true
    //     },
    //     color: ['#1aad19'], //柱状图颜色
    //     xAxis: [{
    //       type: 'value',
    //       name: '用户数量',
    //       min: 0, //设置数量显示最小值
    //       // max: 250,//设置数量显示最大值
    //       interval: 20, //轴线间间距
    //     }],
    //     yAxis: [{
    //       type: 'category',
    //       name: '省份',
    //       data: ['浙江', '陕西', '山西', '江西', '天津', '四川', '北京', '黑龙江', '台湾'],
    //       axisPointer: {
    //         type: 'shadow'
    //       }
    //     }],
    //     series: [{
    //       name: 'Evaporation',
    //       type: 'bar',
    //       data: [
    //         2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 8, 190, 65, 14, 40, 103, 86, 98
    //       ]
    //     }]
    //   };
    //   option && myChart.setOption(option)
    // },
    timeChange() {
      this.dates = []
      this.times = []
      this.getGuideTimes()
    },

    //年龄分布
    timeChangeage() {
      this.datesage = []
      this.timesage = []
      this.getGuideTimesage()
    },
    //地区分布
    timeChangedq() {
      this.datesdq = []
      this.timesdq = []
      // this.getGuideTimesagedq()
      this.gethostList()
    },
    // time1Changeyy(){
    //   this.shitime()
    // },
    dayChange() {
      console.log("进来方法了嘛");
      this.shitime()
      this.daytime()

    },

    time1Change() {
      this.dates1 = []
      this.times1 = []
      this.getActivityResult()
    },
    refresh1() {
      // console.log('2222');
      this.getTotalVisitors()
    },

    guideTimes() {
      var chartDom2 = document.getElementById('main3')
      var myChart2 = echarts.init(chartDom2)
      var option2
      option2 = {
        tooltip: {
          trigger: 'axis'
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        xAxis: {
          type: 'category',
          data: this.dates,
          name: '日期'
        },
        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [{
          data: this.times,
          type: 'line',
          color: '#1AAD19'
        }]
      }

      option2 && myChart2.setOption(option2)
    },
    //实时获取到馆人数
    gethostList() {
      this.$http("/chongqing/stage/reservation-traveler/getTotalBetweenDate", {
        startDate: this.timedq.length == 0 ? '' : this.timedq[0],
        endDate: this.timedq.length == 0 ? '' : this.timedq[1]
      }, "post", (res) => {
        console.log(res, "0000000000000000000000000");
        this.yynumber = res.data.data.bookNum,
          this.hxnumber = res.data.data.usedNum,
          this.hexnumber1 = res.data.data.usedRatio
      })
    },

    // shitime() {
    //   this.$http('/chongqing/stage/reservation-traveler/getTotalResult', {
    //     startDate: this.timesyy.length == 0 ? '' : this.timesyy[0],
    //     endDate: this.timesyy.length == 0 ? '' : this.timesyy[1]
    //   }, 'post', (res) => {
    //     console.log(res, "/////////////////////////////////////////////////////////////")
    //     this.bookNum = res.data.data.bookNum,
    //     this.usedNum = res.data.data.usedNum,
    //     this.usedRatio = res.data.data.usedRatio
    //     this.oiMeter()
    //     this.main2()
    //   })
    // },
    shitime() {
      console.log("这个时间筛选", this.valueday);

      this.$http('/chongqing/stage/reservation-traveler/getTotalResult', {
        travelDate: this.valueday,
        sessionTime: ''
      }, 'post', (res) => {
        console.log(res, "/////////////////////////////////////////////////////////////")
        this.bookNum = res.data.data.bookNum,
          this.usedNum = res.data.data.usedNum,
          this.usedRatio = res.data.data.usedRatio
        this.oiMeter()
        this.main2()
        this.daytime()
      })
    },
    daytime() {
      this.$http('/chongqing/stage/reservation-traveler/getSessionTimeByDate', {
        bookDate: this.valueday,
      }, 'post', (res) => {
        console.log(res, "某一天的场次");
        this.dayData = res.data.data
        const daydata = ["全天"]
        this.dayData.map((item) => {
          daydata.push(item.sessionTime)
        })
        console.log(daydata);
        this.options = daydata
      })
    },
    valuechange() {
      console.log(this.valuem);
      this.$http('/chongqing/stage/reservation-traveler/getTotalResult', {
        travelDate: this.valueday,
        sessionTime: this.valuem === "全天" ? '' : this.valuem
      }, 'post', (res) => {
        console.log(res, "/////////////////////////////////////////////////////////////")
        this.bookNum = res.data.data.bookNum,
          this.usedNum = res.data.data.usedNum,
          this.usedRatio = res.data.data.usedRatio
        this.oiMeter()
        this.main2()
      })
    },



    guideTimesage() {
      var chartDom2 = document.getElementById('mainage')
      var myChart2 = echarts.init(chartDom2)
      var option2
      option2 = {
        tooltip: {
          trigger: 'axis'
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        xAxis: {
          type: 'category',
          data: this.datesage,
          name: '年龄'
        },
        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [{
          data: this.timesage,
          type: 'bar',
          color: '#1AAD19'
        }]
      }
      option2 && myChart2.setOption(option2)
    },
    //游客地区分析
    // getGuideTimesagedq() {
    //   this.$http('/ztmuseum/stage/reservation-traveler/getProvinceResult', {
    //     start: this.timedq.length == 0 ? '' : this.timedq[0],
    //     end: this.timedq.length == 0 ? '' : this.timedq[1]
    //   }, 'post', (res) => {

    //     if (res.data.code == 1000) {

    //       if (res.data.data.length == 0) {
    //         this.datesdq.push('暂无数据')
    //         this.timesdq.push(0)
    //       } else {
    //         res.data.data.map(item => {
    //           this.datesdq.push(item.province)
    //           this.timesdq.push(item.num)
    //         })
    //       }

    //       this.guideTimesagedq()
    //     } else {
    //       this.$Message.error(res.data.msg)
    //     }
    //   })
    // },
    guideTimesagedq() {
      var chartDom2 = document.getElementById('maindq')
      var myChart2 = echarts.init(chartDom2)
      var option2
      option2 = {
        tooltip: {
          trigger: 'axis'
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        xAxis: {
          type: 'category',
          data: this.datesdq,
          name: '区域'
        },
        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [{
          data: this.timesdq,
          type: 'bar',
          color: '#1AAD19'
        }]
      }

      option2 && myChart2.setOption(option2)
    },
    //游客分析性别
    // getGuideTimesagesex() {
    //   this.$http('/ztmuseum/stage/reservation-traveler/getSexResult', {
    //     start: this.timesex.length == 0 ? '' : this.timesex[0],
    //     end: this.timesex.length == 0 ? '' : this.timesex[1]
    //   }, 'post', (res) => {
    //     if (res.data.code == 1000) {
    //       // console.log(res,"********************////////////");
    //       if (res.data.data.length == 0) {
    //         this.datessex.push('暂无数据')
    //         this.timessex.push(0)
    //       } else {
    //         res.data.data.map(item => {
    //           if (item.sex == "1") {
    //             item.sex = "男"
    //           } else if (item.sex == "0") {
    //             item.sex = "女"
    //           }
    //           this.datessex.push(item.sex)

    //           this.timessex.push(item.num)
    //         })
    //       }

    //       this.guideTimesagesex()
    //     } else {
    //       this.$Message.error(res.data.msg)
    //     }
    //   })
    // },
    guideTimesagesex() {
      var chartDom23 = document.getElementById('mainsex')
      var myChart2 = echarts.init(chartDom23)
      var option2
      option2 = {
        tooltip: {
          trigger: 'axis'
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        xAxis: {
          type: 'category',
          data: this.datessex,
          name: '区域'
        },

        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [{
          data: this.timessex,
          type: 'line',
          color: '#1AAD19'
        }]
      }

      option2 && myChart2.setOption(option2)
    },
    // getActivityResult() {
    //   this.$http('/ztmuseum/stage/statistics/getActivityResult', {
    //     beginDate: this.time1.length == 0 ? '' : this.time1[0],
    //     endDate: this.time1.length == 0 ? '' : this.time1[1]
    //   }, 'post', (res) => {
    //     // console.log(res, 1111)
    //     if (res.data.code == 1000) {
    //       if (res.data.data.length == 0) {
    //         this.dates1.push('暂无数据')
    //         this.times1.push(0)
    //       } else {
    //         res.data.data.map(item => {
    //           this.dates1.push(item.name)
    //           this.times1.push(item.num)
    //         })
    //       }

    //       this.activityResult()
    //     } else {
    //       this.$Message.error(res.data.msg)
    //     }
    //   })
    // },
    activityResult() {
      var chartDom3 = document.getElementById('main')
      var myChart3 = echarts.init(chartDom3)
      var option3

      option3 = {
        tooltip: {
          trigger: 'axis'
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        xAxis: {
          type: 'category',
          data: this.dates1,
          name: '活动'
        },
        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [{
          data: this.times1,
          type: 'bar',
          color: '#1AAD19'
        }]
      }

      option3 && myChart3.setOption(option3)
    }
  }
}
